<template>
  <div class="content">

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item
          v-for="banner in communityList[communityIndex].banners"
          :key="banner.image"
      >
        <van-image
            :src="banner.image"
            style="width: 100%; height: 400px"
            @click="
            () => {
              onClickBanner(banner.path);
            }
          "
        ></van-image>
      </van-swipe-item>
    </van-swipe>

    <div
        style="
        display: flex;
        flex-direction: row;
        padding-left: 20px;
        padding-top: 10px;
        transform: translate(0px, -400px);
        align-items: center;
      "
        @click="showPicker = true"
    >
      <div class="location">
        <img src="../../assets/images/icons/location_FFFEF8.png" alt=""/>
        <span>{{ communityList[communityIndex].text }}</span>
      </div>
    </div>
    <van-popup
        v-if="showPicker"
        v-model:show="showPicker"
        round
        position="bottom"
    >
      <!--      <van-picker-->
      <!--          :columns="communityList"-->
      <!--          @cancel="showPicker = false"-->
      <!--          @confirm="onConfirm"-->
      <!--      />-->
      <van-action-sheet
          v-model:show="showPicker"
          :actions="communityList"
          title="切换社区"
          @select="onConfirm"
      />
    </van-popup>

    <div class="wrapper" style="transform: translate(0px, -100px)">
<!--      <div class="row" style="justify-content: end;padding-right: 20px" >-->
<!--        <div class="indicator">-->
<!--          <div class="column">-->
<!--          <div class="row">-->
<!--            <img src="@/assets/renshu.png" class="image-icon"/>-->
<!--            <span class="text-count">在场人数</span>-->
<!--          </div>-->

<!--          </div>-->
<!--          <div class="column">-->
<!--            <div class="row">-->
<!--              <img src="@/assets/renshu.png" class="image-icon"/>-->
<!--              <span class="text-count">在场人数</span>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div style="display: flex; flex-direction: row; justify-content: center">
        <div class="modules" style="width: 100%; margin: 20px">
          <div
              class="modulesRow"
              v-for="(app, index) in spArr(appModules, 4, true)"
              :key="index"
          >
            <div v-for="(item, index2) in app" :key="index2">
              <div @click="goAppModule(item)" v-if="item && item.title">
                <img :src="item.icon" class="moduleAppIcon"/>

                <div>
                  <text>{{ item.title }}</text>
                </div>
              </div>
              <!--              <div v-else class="moduleAppIcon"></div>-->
            </div>
          </div>
        </div>
      </div>

      <div
          style="
          padding-left: 18px;

          padding-right: 18px;
        "
      >

        <!-- <div @click="onTapActivityCard">
          <HomeActivityCard
            :status="1"
            title="活动名称"
            time="2023年11月292日"
            activity-image="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
          ></HomeActivityCard>
        </div> -->
        <HomeTitleRow
            :more-link="''"
            :title="'便民服务'"
            :sub="'有温度的智慧社区'"
        />
        <div style="height: 18px"></div>
        <div style="display: flex; flex-direction: row">
          <div
              class="card"
              style="flex-grow: 1; height: 160px"
              @click="
              () => {
                // onTapConvenienceServiceCard(4);
                router.push('/scan')
              }
            "
          >
            <ConvenienceServiceTexts
                title="洗护"
                sub="衣服便捷洗护"
            ></ConvenienceServiceTexts>
            <div
                style="
                display: flex;
                flex-direction: row;
                justify-content: center;
              "
            >
              <img
                  src="@/assets/washing-machine.png"
                  style="height: 96px; width: 78px"
              />
            </div>
          </div>
          <div style="width: 10px"></div>
          <div style="flex-grow: 1">
            <div>
              <div
                  class="card cardSmall"
                  @click="
                  () => {
                    onTapConvenienceServiceCard(6);
                  }
                "
              >
                <ConvenienceServiceTexts
                    title="理发"
                    sub="
                    30分钟快剪理发
                  "
                ></ConvenienceServiceTexts>

                <img
                    src="@/assets/barber-shop.png"
                    style="width: 68px; height: 47px"
                />
              </div>
              <div style="height: 7px"></div>

              <div
                  class="card cardSmall"
                  @click="
                  () => {
                    onTapConvenienceServiceCard(5);
                  }
                "
              >
                <ConvenienceServiceTexts
                    title="快递"
                    sub="
                  快递
                  "
                ></ConvenienceServiceTexts>
                <img
                    src="@/assets/sewing.png"
                    style="width: 47px; height: 47px"
                />
              </div>

            </div>
          </div>
        </div>
        <HomeTitleRow
            :on-click-more="onClickMoreActivity"
            :title="'热门活动'"
            :sub="'热门活动展示'"
        />
        <div style="height: 8px"></div>
        <van-list
            v-if="list.length"
            v-model:loading="loading"
            v-model:error="error"
            :finished="finished"
            finished-text="没有更多了"
            error-text="出错了，点击重试"
            @load="getHotActivity"

        >
          <ActivityCard
              class="list"
              v-for="item in list"
              :key="item.id"
              :data="item"

          />
        </van-list>

        <!-- 自助消费开始 -->
        <!--        <HomeTitleRow-->
        <!--            :more-link="'222'"-->
        <!--            :title="'自助消费'"-->
        <!--            :sub="'咖啡馆自助消费'"-->
        <!--        />-->
        <!--        <div style="height: 8px"></div>-->
        <!--        <div-->
        <!--            @click="handleSelfConsume"-->
        <!--        >-->
        <!--          <HomeActivityCard-->
        <!--              title="有一间咖啡"-->
        <!--              time="一家有温度的咖啡店"-->
        <!--              :activity-image="coffeeHouseImage"-->
        <!--          ></HomeActivityCard>-->
        <!--        </div>-->
        <!-- 自助消费结束 -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import banner1 from '@/assets/banner1-1.png';
import banner2 from '@/assets/banner1-2.png';
import {ref, onMounted} from 'vue';
import HomeTitleRow from '@/views/home/components/home-title-row.vue';
import HomeActivityCard from '@/views/home/components/home-activity-card.vue';
import ConvenienceServiceTexts from '@/views/home/components/convenience-service-texts.vue';
import storeIcon from '../../assets/lpdh.png';
import commonShare from '../../assets/share-reserve.png';
import convenienceServiceIcon from '../../assets/sqfw.png';
import consumeIcon from '../../assets/community-consume.png';
import couponIcon from '../../assets/lqyh.png';
import callIcon from '../../assets/call-service.png';
import govern from '../../assets/zzjf.png';
import brand from '../../assets/kjkm.png';
import activity from '../../assets/activity-reserve.png';
import router from '@/router/index';
import api from '@/api/index';
import {spArr} from '@/utils/array-utils';
import {showToast} from 'vant';
import coffeeHouseImage from '@/assets/coffee_house.png';
import {userStore} from '@/stores/user.js';
import ActivityCard from '@/components/activity-card/ScenicCard.vue';
import {getSimpleText} from '@/utils/string-utils';
import {getToken} from '@/utils/user.js';
import {tabInfoStore} from '@/stores/tabInfo.js';
import {goToWithTmpToken} from "@/utils/url-utils";

defineOptions({
  name: 'home'
})
console.log('sadadddddddd')
const tabInfo = tabInfoStore();
const cmStore = import.meta.env.VITE_COMMUNITY_STORE_URL;
const siteCode = import.meta.env.VITE_R29_SITECODE
const user = userStore();
const convenienceList = ref({}); //{4:xxxx,5:666,}

onMounted(() => {
  tabInfo.setTabVisible(true);
});

const list = ref([]);
const showPicker = ref(false);

function onClickMoreActivity() {
  router.push({
    path: '/activityReservation/list',
    query: {
      type: 'activityReservation',
    },
  });
}

function onTapActivityCard() {
  // uni.navigateTo({
  //   url: '/views/activityPages/activity/activity-detail?id=1',
  // })
}

function onConfirm(e) {
  console.log(e);
  communityIndex.value = communityList.value.indexOf(e);
  showPicker.value = false;
}

let page = 1
const finished = ref(false)
const loading = ref(false)
const error = ref(false);

// 获取热门活动函数
function getHotActivity() {
  console.log('getHotActivity....')
  let params = {
    pageNum: page,
    pageSize: 10,
    cityCode: user?.city?.code,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude,
    reservationStatus: 0,
  };
  api.getActivityReservation(params).then((res) => {
    loading.value = false
    if (res.code === '200') {
      list.value = [...list.value, ...res.data.list];
      page = page + 1;
    }
    finished.value = res.data?.currPage === res.data?.totalPage || res.data?.totalPage == 0


  }).catch((e) => {
    console.log('getHotActivity error', e)
    error.value = true
  }).finally(() => {
    loading.value = false
  });
}

getHotActivity();

// function gotoUri(item, uri: URL) {
//   if (item.path.indexOf('#/') !== -1) {
//     window.location.href = uri.href.replace(uri.origin, `${uri.origin}/#`);
//   } else {
//     window.location.href = uri.href;
//   }
// }

function goAppModule(item) {
  if (!item || !item.path) {
    showToast('敬请期待');

    return;
  }
  if (item.path.startsWith('tel://')) {
    window.location.href = item.path
    return;
  }
  if (item.path.startsWith(cmStore)) {
    goToWithTmpToken(item)
  } else {
    router.push({path: item.path, query: item.query});
  }
}

const communityList = ref([
  {
    text: '金象花园社区',
    name: '金象花园社区',
    value: '金象花园社区',
    banners: [
      {
        image: banner1,
        path: null,
      },
      {
        image: banner2,
      },
      // {
      //   image:
      //     'https://ts1.cn.mm.bing.net/th/id/R-C.d2c32212589206daf26530681c552985?rik=eKcHGxsJYl17RQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f45%2f6745.jpg&ehk=NmOT%2b0lr4WTqJcdT%2f0pzN4cgHQgE8KLJzAnUvSGyQbw%3d&risl=&pid=ImgRaw&r=0',
      // },
    ],
  },
  {
    text: '晨辉社区',
    name: '晨辉社区',
    value: '晨辉社区',
    banners: [
      {
        image:
            'https://ts1.cn.mm.bing.net/th/id/R-C.3e42ad7c7744a7a612bfbaa480405611?rik=eX46Dun%2fFF1aDg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f25%2f6125.jpg&ehk=ukEQFHgNgClnZxjkosi%2bP3OoaZicxvcitCFcgJISxww%3d&risl=&pid=ImgRaw&r=0',
      },
      {
        image:
            'https://ts1.cn.mm.bing.net/th/id/R-C.fe97a95159f97c5dbc52e46cebd83ea4?rik=F9yvG21Ar75WLg&riu=http%3a%2f%2fg.hiphotos.baidu.com%2fzhidao%2fpic%2fitem%2f54fbb2fb43166d22b95d61f4472309f79052d2ac.jpg&ehk=DO%2fgbhnI4JtawIUkz0Sm4oIEY0WjX%2bWtzuMNP2soDAc%3d&risl=&pid=ImgRaw&r=0',
      },
      {
        image:
            'https://ts1.cn.mm.bing.net/th/id/R-C.fbc6c147e04c3e11ef3deb0fe55c6825?rik=%2fLl5ZkdmkROKjA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f16%2f4816.jpg&ehk=NofvLrCJlqCuuJ85k3BdXXbf99fXPwswgPh9Gpu1IsI%3d&risl=&pid=ImgRaw&r=0',
      },
    ],
  },
  {
    text: '锦华社区',
    name: '锦华社区',
    value: '锦华社区',
    banners: [
      {
        image:
            'https://ts1.cn.mm.bing.net/th/id/R-C.20cc3836a46a1d7d8cefccb34ec1eed5?rik=Kq9%2bDjBZ1ZN5pg&riu=http%3a%2f%2fsc.68design.net%2fqita7%2fHDR%2fimages%2fHDR-009001.jpg&ehk=2oJs4fa%2fgAKXCRPMiT5MO6kQhNbu2xLsCNtWIV4WW6w%3d&risl=&pid=ImgRaw&r=0',
      },
      {
        image: 'https://pic.ntimg.cn/file/20200316/3018779_153021626082_2.jpg',
      },
      {
        image:
            'https://ts1.cn.mm.bing.net/th/id/R-C.460b2263b5fb251d8212123b89b18d27?rik=1Lrh9C7EWKER3Q&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f71%2f8371.jpg&ehk=ssJYUgT%2bfsnfLSC0OM%2foenLpX4EntCm99MvfRvh%2fqrQ%3d&risl=&pid=ImgRaw&r=0',
      },
    ],
  },
]);

const communityIndex = ref(0);
// const { windowWidth, windowHeight, statusBarHeight } =
//   uni.getSystemInfoSync()
const appModules = [
  {
    title: '共享预约',
    icon: commonShare,
    path: '/activityReservation/list',
    query: {
      type: 'sharedReservation',
    },
  },
  // {
  //   title: '社区商店',
  //   icon: storeIcon,
  //   path: `${cmStore}/#/mainSite/1/?cooperation=1&siteCode=${siteCode}`,
  // },

  // {
  //   title: '便民服务',
  //   icon: convenienceServiceIcon,
  //   path: '/new-convenientservices',
  // },
  {
    title: '社区消费',
    icon: consumeIcon,
    path: `${cmStore}/#/MallShopPage/1742745426177691648?tableNo=13&siteCode=1736657944348594176`,
  },
  // {
  //   title: '政务服务',
  //   icon: govern,
  //   path: '/new-governmentservices',
  // },
  // {
  //   title: '品牌',
  //   icon: brand,
  //   path: '/new-brand',
  // },
  {
    title: '活动预约',
    icon: activity,
    path: '/activityReservation/list',
    query: {
      type: 'activityReservation',
    },
  },
  {
    title: '联系客服',
    icon: callIcon,
    path: 'tel://400-000',

  },
];

//reservationType:4-便民服务洗护5-便民服务缝补6-便民服务理发
function getConvenienceList(reservationType) {
  api.getConvenienceList({reservationType}).then((res) => {
    if (res.code == '200') {
      convenienceList.value[reservationType] = res.data.list;
      // convenienceList.value.4/;
      // console.log(
      //   'convenienceList.value',
      //   JSON.stringify(convenienceList.value[reservationType]),
      //   JSON.stringify(convenienceList.value)
      // );
    }
  });
}

getConvenienceList(4);
getConvenienceList(5);
getConvenienceList(6);

function onTapConvenienceServiceCard(type) {
  var anyConvenienceList = convenienceList.value[type]?.[0]
  if (!anyConvenienceList) {
    for (let i = 4; i <= 6; i++) {
      if (convenienceList.value[i]?.length) {
        anyConvenienceList = convenienceList.value[i]?.[0];
        break
      }
    }
  }
  router.push({
    path: '/new-storedetails',
    query: {
      id: anyConvenienceList?.id,
    },
  });
}

function onClickBanner(path) {
  path = path || '/activityReservation/list?type=activityReservation';
  router.push(path);
}

function handleSelfConsume() {
  goAppModule(appModules.filter(e => e.title === '自助消费')[0])
}

onMounted(() => {

})
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: column;

  background-color: #f5f5f5;

  .wrapper {
    width: 100%;
    // padding-left: 18px;
    // padding-right: 18px;
  }

  .logo {
    width: 200rpx;
    height: 200rpx;
    margin: 50rpx auto;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    color: #8f8f94;
    font-size: 36rpx;
  }

  .parentDiv {
    // position: relative;
    // .banner {
    //     position: absolute;
    //     z-index: 1;
    // }
  }

  .modules {
    // width: 354px;
    height: 94px;

    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    justify-content: space-around;
    display: flex;
    flex-direction: column;

    .modulesRow {
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      .moduleAppIcon {
        width: 50px;
        height: 50px;
        line-height: 20px;

        text-align: center;
        border-radius: 999px;
      }
    }
  }

  .card {
    background-color: white;
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box; //设置padding不增加高度
  }

  .cardSmall {
    display: flex;
    flex-direction: row;
    height: 76px;

    justify-content: space-between;
  }
}

.location {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  //width: 6.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  flex-shrink: 0;
  padding-right: 10px;
  padding-left: 10px;
  color: #fffef8;

  img {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.02rem;
  }

  span {
    padding: 0 0.02rem;
  }
}

.indicator {

  width: 146px;
  height: 50px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: row;

}
.column{
  display: flex;
  flex-direction: column;
}
.row{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.image-icon{

  height: 15px;
}
.text-count{
  color: white;
  font-size: 12px;
}
</style>
